import { Paper, TableContainer } from '@mui/material';
import { makeStyles } from '@mui/styles';
import React from 'react';

const useStyles = makeStyles(() => ({
    root: {
        background: 'transparent',
        overflowX: 'hidden',

        '& .MuiTableHead-root tr': {
            fontWeight: '500',
            fontSize: '14px',
            lineHeight: '17px',
            '& th:first-child': {
                paddingLeft: '24px'
            }
        },
        '& .MuiTableHead-root tr th': {
            padding: '20px 24px',
            color: '#BCB6E9'
        },
        '& .MuiTableBody-root tr': {
            fontWeight: '300',
            fontSize: '12px',
            lineHeight: '18px',
            padding: '20px',
            background: '#13112A',
            borderRadius: '12px',
            '&:first-child td': {
                borderWidth: '0 12px 12px 12px',
                '&:first-child': {
                    borderTopLeftRadius: '12px'
                },
                '&:last-child': {
                    borderTopRightRadius: '12px'
                }
            }
        },
        '& .MuiTableRow-root td': {
            padding: '20px',
            // border: 'solid 2px #0B0821',
            border: '0 !important',
            // borderRadius:'12px !important',
            borderStyle: 'solid none',
            '&:first-child': {
                borderLeftStyle: 'solid',
                borderTopLeftRadius: '12px',
                borderBottomLeftRadius: '12px'
            },
            '&:last-child': {
                borderRightStyle: 'solid',
                borderBottomRightRadius: '12px',
                borderTopRightRadius: '12px'
            }
        },
        '& .MuiTableCell-root': {
            color: '#ffffff',
            border: 'none'
        },
        '& .MuiCheckbox-root': {
            color: '#ffffff',
            '&.Mui-checked': {
                color: '#ffffff'
            },
            '&.MuiCheckbox-indeterminate': {
                color: '#ffffff'
            }
        },
        '& .MuiTableRow-hover': {
            cursor: 'pointer',
            '&:hover .MuiTableCell-root': {
                background: '#13112A'
            }
        }
    }
}));

const GFSTable = (props) => {
    const { children, ...rest } = props;
    const classes = useStyles();
    return (
        <TableContainer component={Paper} className={classes.root} {...rest}>
            {children}
        </TableContainer>
    );
};

export default GFSTable;
